.UserAvatar {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;

    img,
    canvas {
        border-radius: 50%;
        overflow: hidden;
    }

    canvas {
        height: 100%;
        width: 100%;
    }

    .spinner-wrapper {
        height: 100%;
        .Icon {
            margin: 0px;
        }
    }

    .is-online-dot {
        width: 30%;
        height: 30%;
        z-index: 0;
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 50%;
        border: solid 2px var(--bg);

        &.online {
            background-color: var(--color-true);
        }

        &.offline {
            background-color: var(--color-null);
        }
    }

    &.tiny {
        height: 20px;
        width: 20px;
    }

    &.deleted {
        img,
        canvas {
            filter: grayscale(90%);
        }
    }
}
